<script setup>
  import {onMounted, ref} from "vue";
  import { CopyDocument, Edit} from "@element-plus/icons-vue";
  import { ElMessage } from "element-plus";
  import { useStyleStore } from "@/store/styleStore.js";
  import { useStore } from "@/store/index.js";
  import DateUtil from "../../utils/DateUtil.js";
  import LocalStoreUtil from "@/utils/LocalStoreUtil.js";
  import { useRouter } from "vue-router";

  const styleStore = useStyleStore();
  const store = useStore();
  const router = useRouter();

  let roll = ref(false);

  let dialogVisible = ref(false);
  let loading = ref(false);
  let form = ref({
    type: 1, // 1昵称，2生日
    nickName: '',
    birthday: ''
  });


  let status = ref(true);

  onMounted(() => {
    // 从本地缓存中将用户信息设置到 pinia 缓存中
    if (LocalStoreUtil.isLogin()) {
      store.user.info = LocalStoreUtil.getUserInfo();
    }
  })

  const copy = () => {
    ElMessage.success('已经复制到剪贴板咯');
  }

  const scroll = (event) => {
    roll.value = event.target.scrollTop !== 0;
  }

  const handleClose = () => {
    dialogVisible.value = false;
    form.value.type = 1;
    form.value.nickName = '';
    form.value.birthday = '';
  }

  const edit = (type) => {
    dialogVisible.value = true;
  }

  const to_user_info_page = () => {
    router.replace('/user_info');
  }

</script>

<template>
  <div :class="['account-basic', styleStore.userInfo.top ? 'open-animation':'close-animation']"
       @contextmenu.stop="styleStore.comment.method.globalOffParentDefault($event)" @click.stop="">
    <div :class="['header-basic', 'header-border', roll ? 'header-border-roll-true':'header-border-roll-false']">
      <div :class="['header-title', roll ? 'header-title-roll-true':'header-title-roll-false']">账号管理</div>
      <div :class="['close']" @click="styleStore.userInfo.method.cancelTop()">×</div>
    </div>
    <div class="body-basic" @scroll="scroll($event)">
      <div :class="['hello', roll ? 'hello-roll-true':'hello-roll-false']">
        欢迎您，{{ store.user.info.nickName }}
      </div>
      <div class="info">
        <div class="info-module-basic">
          <div class="inner">
            <div class="module-name">邮箱</div>
            <div class="module-body">{{ store.user.info.email === '' ? '-' : store.user.info.email }}</div>
            <div class="module-function">
              <div class="icon" @click="copy">
                <el-icon>
                  <CopyDocument />
                </el-icon>
              </div>
              <div class="text" @click="copy">复制</div>
            </div>
          </div>
        </div>
        <div class="info-module-basic">
          <div class="inner">
            <div class="module-name">本站地址</div>
            <div class="module-body">www.biscuit.icu</div>
            <div class="module-function">
              <div class="icon" @click="copy">
                <el-icon>
                  <CopyDocument />
                </el-icon>
              </div>
              <div class="text" @click="copy">复制</div>
            </div>
          </div>
        </div>
        <div class="info-module-basic">
          <div class="inner">
            <div class="module-name">昵称</div>
            <div class="module-body">{{ store.user.info.nickName === '' ? '-' : store.user.info.nickName }}</div>
            <div class="module-function">
              <div class="icon" @click="edit(1)">
                <el-icon>
                  <Edit />
                </el-icon>
              </div>
              <div class="text" @click="edit(1)">编辑</div>
            </div>
          </div>
        </div>
        <div class="info-module-basic">
          <div class="inner">
            <div class="module-name">生日</div>
            <div class="module-body">{{ DateUtil.timestampFormatDate(store.user.info.birthday) === '1900-01-01' ? '-' : DateUtil.timestampFormatDate(store.user.info.birthday)}}</div>
            <div class="module-function">
              <div class="icon" @click="edit(2)">
                <el-icon>
                  <Edit />
                </el-icon>
              </div>
              <div class="text" @click="edit(2)">编辑</div>
            </div>
          </div>
        </div>
      </div>
      <div class="info-max">
        <div class="max-inner">
          <div class="title">账号进阶管理</div>
          <div class="desc">修改邮箱、手机号、密码，管理您的登录设备及IP。</div>
          <div class="button">
            <span @click="to_user_info_page">账号进阶管理</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <el-dialog
      v-model="dialogVisible"
      title="用户信息修改"
      width="500"
      :before-close="handleClose"
  >
    <el-form :model="form" label-width="auto" style="max-width: 500px">
      <el-form-item label="昵称">
        <el-input v-model="form.nickName" placeholder="请输入昵称"/>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker
            style="width: 500px;"
            v-model="form.birthday"
            type="date"
            placeholder="Pick a day"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button v-loading="loading" type="primary" @click="dialogVisible = false">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
  .account-basic {
    width: 620px;
    height: 530px;
    border-radius: 15px;
    background-color: rgb(245, 245, 245);
    position: absolute;
    top: calc(50% - 265px);
    left: calc(50% - 310px);
    box-shadow: 0 0 15px 8px rgba(0, 0, 0, .3);
    user-select: none;
    overflow: hidden;
  }

  .header-basic {
    width: 620px;
    height: 48px;
    display: flex;
    justify-content: center;
    transition: border-bottom-color .3s;
    z-index: 3;
    position: absolute;
    background-color: rgb(245, 245, 245);
  }
  .header-border {
    transition: border-bottom-color .3s;
  }
  .header-border-roll-false {
    border-bottom: 1px solid transparent;
  }
  .header-border-roll-true {
    border-bottom: 1px solid rgb(230, 230, 230);
  }
  .header-title {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: rgb(58, 58, 58);
    transition: opacity .3s;
  }
  .header-title-roll-false {
    opacity: 0;
  }
  .header-title-roll-true {
    opacity: 1;
  }
  .close {
    color: rgb(78, 78, 78);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    position: absolute;
    top: 5px;
    right: 12px;
  }
  .close:hover {
    cursor: pointer;
  }

  .body-basic {
    position: relative;
    width: 540px;
    height: 450px;
    padding-bottom: 12px;
    margin: 0 auto;
    padding-top: 50px;
    overflow: auto;
    overflow-y: scroll;
  }
  .hello {
    font-size: 28px;
    transition: opacity .3s;
  }
  .hello-roll-false {
    opacity: 1;
  }
  .hello-roll-true {
    opacity: 0;
  }
  .info {
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
  }
  .info-module-basic {
    width: 265px;
    height: 120px;
    background-color: white;
    border-radius: 10px;
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .inner {
    width: 220px;
    height: 75px;
  }
  .info-module-basic:nth-of-type(2n) {
    margin-left: 5px;
  }
  .info-module-basic:nth-of-type(2n+1) {
    margin-right: 5px;
  }
  .module-name {
    color: rgb(128, 128, 128);
    font-size: 14px;
  }
  .module-body {
    color: rgb(58, 58, 58);
    font-size: 14px;
    margin-top: 2px;
  }
  .module-function {
    width: 100%;
    color: rgb(112, 192, 0);
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
  }
  .module-function .icon {
    font-size: 15px;
    margin-right: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .module-function .text {
    font-size: 14px;
    cursor: pointer;
  }

  .info-max {
    width: 100%;
    height: 135px;
    background-color: white;
    margin-top: 5px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .max-inner {
    width: 490px;
    height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
  }
  .desc {
    font-size: 13px;
    color: rgb(108, 108, 108);
  }
  .button {
    font-size: 13px;
    color: rgb(112, 192, 0);
  }
  .button span {
    cursor: pointer;
  }
  .button span::after {
    content: '>';
    font-size: 12px;
    margin-left: 3px;
  }

  /* 打开与关闭样式 */
  .open-animation {
    display: block;
    animation-name: openAnimation;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
  .close-animation {
    display: none;
    animation-name: closeAnimation;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
  @keyframes openAnimation {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    50% {
      opacity: 0.5;
      transform: scale(1.2);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes closeAnimation {
    0% {
      display: block;
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

</style>